<!-- 投标结果 -->
<template>
    <div class="supply container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">投标结果</h1>
                </el-col>
            </el-row>
            <el-row justify="end" class="export-container">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="addCustomer"
                    >新增</el-button
                >
                <el-button
                    type="primary"
                    icon="el-icon-download"
                    size="mini"
                    @click="exporting"
                    >导出</el-button
                >
                <el-button
                    type="primary"
                    icon="el-icon-data-line"
                    size="mini"
                    @click="showChart"
                    >图表</el-button
                >
            </el-row>

            <el-table
                ref="customerTable"
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="bidId" label="标书Id"></el-table-column>

                <el-table-column prop="isWinBid" label="是否中标">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.isWinBid === 1"
                            >是</el-tag
                        >
                        <el-tag type="danger" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="winBidCompany"
                    label="中标单位"
                ></el-table-column>
                <el-table-column
                    prop="winBidMoney"
                    label="中标金额"
                ></el-table-column>
                <el-table-column prop="winBidMoneyCh" label="中标金额大写">
                </el-table-column>
                <el-table-column
                    prop="tenderRemarks"
                    label="投标总结"
                ></el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                ></el-table-column>
                <el-table-column
                    prop="changeTime"
                    label="更新时间"
                ></el-table-column>

                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="详情"
                            placement="bottom"
                        >
                            <el-button
                                plain
                                size="mini"
                                icon="el-icon-more"
                                @click="handleDetail(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="编辑"
                            placement="bottom"
                        >
                            <el-button
                                type="primary"
                                plain
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="bottom"
                        >
                            <el-button
                                type="danger"
                                plain
                                size="mini"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="table-pagination"
            style="margin-top: 10px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 图表弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="isShow"
            width="100%"
            fullscreen
            show-close
            destroy-on-close
            append-to-body
        >
            <span>这里展示图表</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="isShow = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-drawer
        size="100%"
        :visible.sync="drawer"
        direction="ttb"
        :before-close="handleClose">
        <div style="height: 90%;overflow: auto;">
            <addEdit ref="addEdit" v-if="isAddEdit" :rowId="rowId"/>
            <detail  v-else :rowId="rowId"/>
        </div>
        <div class="demo-drawer__footer">
                <el-button @click="drawer=false">取 消</el-button>
                <el-button v-if="isAddEdit" type="primary" @click="submit">保 存</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { getTenderResultList ,deleteTenderResult} from "@/api/system/tender";
import detail from './detail'
import addEdit from './add'
export default {
    components:{detail,addEdit},
    data() {
        return {
            tableData: [],
            searchValue: "",
            total: 0,
            selectRows: [],
            limit: 10,
            page: 1,
            isShow:false,
            drawer:false,
            rowId:'',
            isAddEdit:true,
        };
    },
    watch: {
        drawer(val) {
            if (!val) {
                this.getData();
            }
        },
    },
    methods: {
        // 获取列表
        getData() {
            // let type = 3;
            getTenderResultList({
                page: this.page,
                limit: this.limit,
            }).then((res) => {
                this.tableData = res.data.records;
                this.total = res.data.total;
            });
        },
        //新增客户
        addCustomer() {
            this.rowId = ''
            this.isAddEdit = true
            this.drawer = true
        },
          // 编辑客户
          handleEdit(index, row) {
            this.isAddEdit = true
            this.drawer = true
            this.rowId = row.id
        },
        //客户详情
        handleDetail(index, row) {
            this.isAddEdit = false
            this.drawer = true
            this.rowId = row.id
        },
        handleClose(done){
            this.$confirm('确定要离开吗？')
        .then(_ => {
          done()
        })
        .catch(_ => {});
        },
      

        // 删除item
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteTenderResult(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 导出按钮
        exporting() {
            console.log("exporting");
        },
        // 表格checkcbox事件
        handleSelectionChange(rows) {
            this.selectRows = rows;
        },
        //分页器size
        handleSizeChange(val) {
            this.limit = val;
            this.getData();
        },
        //分页器page
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
        showChart() {
            this.isShow = true;
        },
        submit(){
            const cb = ()=>{
                this.drawer = false;
                this.getData();
            }
            this.$refs.addEdit.submit(cb)
        }
    },

    created() {
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
// .visits {
//   padding: 15px;
// }

.filter-container {
    margin-bottom: 15px;
}

.export-container {
    margin: 15px 0;
}

.panel-title {
    font-size: 18px;
    color: #37474f;
    font-weight: 500;
    text-shadow: rgba(0, 0, 0, 0.15) 0 0 1px;
}

.divider {
    margin: 0;
}
</style>
